import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Platform,
  DeviceEventEmitter,
} from 'react-native';

import Request from '../../utils/request';
import PxToDp from '../../utils/PxToDp';
import NavCon from './NavCon';
import SendSuccess from './SendSuccess';
import Base from '../../utils/Base';

const { width } = Base.window;

class SendFail extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
    };
  }

  _findPassword = (email) => {
    if (email === '') {
      return;
    }

    Request.post({
      url: '/dealer/password_find',
      data: {
        email,
      },
      success: () => {
        this.props.navigator.push({
          title: 'sendsuccess',
          component: SendSuccess,
        });
      },
      fail: () => {
        DeviceEventEmitter.emit('showToast', '重置失败!');
      },
      error: () => {
        DeviceEventEmitter.emit('showToast', '服务器开小猜了，请稍后再试!');
      },
    });
  }
  render() {
    return (
      <View style={style.flex}>
        <View style={style.header}>
          <NavCon backName="登录" currentTitle="忘记密码" onPress={() => this.props.navigator.pop()} />
        </View>
        <View style={[style.flex, style.borderTop]}>
          <View style={style.resetemail}>
            <View style={style.bottom}>
              <TextInput
                style={{ height: 42, paddingLeft: 20 }}
                placeholder="请输入邮箱"
                underlineColorAndroid="transparent"
                onChangeText={text => this.setState({ email: text })}
              />
            </View>
          </View>
          <Text style={style.promptword}>
            请输入您的登录邮箱账号，以便我们识别您的身份
          </Text>
          <TouchableOpacity
            activeOpacity={0.75}
            style={style.backTap}
            onPress={() => this._findPassword(this.state.email)}
          >
            <View style={style.btndefault}>
              <Text style={{ fontSize: 20, color: '#fff' }}>重置</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const style = StyleSheet.create({
  header: {
    height: PxToDp(46),
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  flex: {
    flex: 1,
  },
  borderTop: {
    borderTopWidth: 1,
    borderStyle: 'solid',
    borderColor: '#E5E5E5',
  },
  resetemail: {
    height: PxToDp(46),
    marginTop: PxToDp(20),
    paddingLeft: PxToDp(18),
    paddingRight: PxToDp(18),
  },
  bottom: {
    flex: 1,
    borderBottomWidth: 1,
    borderStyle: 'solid',
    borderColor: '#F0F0F0',
  },
  promptword: {
    color: '#BBBEC7',
    marginTop: PxToDp(9),
    paddingLeft: PxToDp(20),
  },
  btndefault: {
    width: width - PxToDp(36),
    height: PxToDp(44),
    backgroundColor: '#DC4437',
    marginTop: PxToDp(55),
    marginLeft: PxToDp(18),
    borderRadius: PxToDp(22),
    overflow: 'hidden',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default SendFail;
